/**
* @file  index
* @author xiao_xie
* @date 2025-03-13
*/


import { Button, Modal, Space } from 'antd';
import React from 'react';
import useComponentStore from '../../store';
import icon from '../../assets/theme.svg'
const index: React.FC = () => {

  const { resetComponents, setEditMode, editMode } = useComponentStore()

  const handleResetPage = () => {
    Modal.confirm({
      title: '提示',
      content: '确定要重置吗？您所有的修改都将消失！',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        resetComponents();
        console.log('ok');
      },
      onCancel: () => {
        console.log('cancel');
      },
    })
  };

  const handlePreview = () => {
    setEditMode(!editMode)
  }

  return <header className='p-4 border-b-4 border-indigo-500' >
    <div className='flex justify-between items-center'>
      <h1 className='font-bold text-2xl flex items-center gap-3'> <img src={icon} alt="icon" /> 低代码引擎</h1>
      <Space>
        {editMode ? <Button size='middle' color="purple" variant='outlined' onClick={handleResetPage}>重置页面</Button> : null}
        <Button size='middle' color="purple" variant="solid" onClick={handlePreview}>{editMode ? "预览" : '退出'}</Button>
      </Space>
    </div>
  </header>;
};
export default index;
